
const scrollers = document.querySelectorAll('.scroller')

const addAnimation = () => {
    scrollers.forEach(scroller => {
        // scroller.setAttribute('data-animate', true)
        console.log(scroller.getAttribute('data-animate'))

        if(scroller.getAttribute('data-animate')) {
            const scrollerInner = scroller.querySelector('.scroller__innter')
       
            scrollerInner.addEventListener('mouseenter', ()=>{
                scrollerInner.style.animationPlayState = 'paused'
            })
    
            scrollerInner.addEventListener('mouseleave', ()=>{
                scrollerInner.style.animationPlayState = 'running'
            })
    
            const scrollerContent = Array.from(scrollerInner.children)
           
            scrollerContent.forEach(item => {
                const duplicatedItem = item.cloneNode(true)
                scrollerInner.appendChild(duplicatedItem)
            })
        }
    })
}

addAnimation()